<template>
  <div class="search-history">
    <van-cell title="搜索历史">
      <div v-if="isDeleteShow">
        <span @click="$emit('update-histories',[])">全部删除</span>&nbsp;&nbsp;
        <span @click="isDeleteShow=false">完成</span>
      </div>
      <van-icon name="delete" v-else @click="isDeleteShow=true"/>
    </van-cell>

    <van-cell
        v-for="(item,index) in  SearchHistories"
        :title="item"
        :key="index"
        @click="onDelete(item,index)"
    >
      <van-icon name="close" v-show="isDeleteShow" />
    </van-cell>
  </div>
</template>

<script>
// import {setItem,getItem} from "@/utils/storage";
// import {mapState} from 'vuex'

export default {
  name: "SearchHistory",
  props:{
    SearchHistories:{
      type:Array,
      required:true
    }
  },
  data(){
    return{
      isDeleteShow:false
    }
  },
  methods:{
    onDelete(item,index){
      if (this.isDeleteShow){
        this.SearchHistories.splice(index,1)
        // setItem('search-histroy',this.SearchHistories)
        return
      } else {
        this.$emit('search',item)
      }
    }
  },
  // computed:{
  //   ...mapState()
  // }
}
</script>

<style scoped>

</style>